<template>
  <div id="videoDetail">
    <div class="detail-container">
      <div class="left-container top-container">
        <nav class="nav">
          <div class="nav-back" @click="goBack">
            <span class="kw-icon-back"> &lt; </span>
            <span style="">&nbsp;返回</span>
          </div>
          <span style="position:absolute;left:80px;">
            {{course.courseName}} > {{lessonName}}</span
          >
        </nav>
        <div class="video-content calc">
          <div class="video-container">
            <div
              id="player-video-vontainer"
              class="player-container video-container"
            >
              <div
                style="min-width:750px;min-height:550px;"
                class="video"
                @click="play"
              >
                <video
                  style="width: 100%; height: 100%;"
                  id="myvideo"
                  src="https://video.pearvideo.com/mp4/adshort/20200901/cont-1693694-15359233_adpkg-ad_hd.mp4"
                  @canplay="getInit"
                  @timeupdate="handlerNowTime"
                />
                <div class="controls">
                  <div class="con_left">
                    <!-- 播放 -->
                    <i
                      :class="{
                        'el-icon-video-play': !isplay,
                        'el-icon-video-pause': isplay,
                      }"
                      @click="play"
                      style="font-size:40px"
                    ></i>
                    <span>{{ nowTime }}/{{ totalTime }}</span>
                  </div>
                  <div class="con_right">
                    <!-- 音量 -->
                    <i
                      class="el-icon-headset"
                      @click="play"
                      style="font-size:40px"
                    ></i>
                    <!-- 全屏 -->
                    <i
                      class="el-icon-monitor"
                      @click="play"
                      style="font-size:40px"
                    ></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="right-container bottom-container">
        <div style="height: 100%;">
          <div class="detail-part-content-title">课程目录</div>
          <div class="study-percent-tip">
            <div class="week-progress">
              <img
                class="video-book"
                src=""
                alt=""
              />
              <span class="progress-label">--</span>
            </div>
          </div>
          <div class="detail-part-content-pc calc detail-part-content">
            <div class="content-fold">
              <div class="content-fold-img"></div>
            </div>
            <div class="content-container">
             <!-- 第一章开始 -->
              <div  v-for="(section,index) in course.courseSections.slice(0,1)" :key="index">
                <div class="content-label">
                  <div class="content-label-title single-line">{{section.sectionName}}</div>
                  <img
                    class="arrow-icon"
                    src=""
                    alt=""
                  />
                </div>
               
                <div class="content-sections">
                  <div :class="{
                      'content-section': lesson.id != lessonid,
                      'content-section content-section-choose': lesson.id == lessonid,
                    }"  v-for="(lesson, j) in section.courseLessons" :key="j" @click="playLesson(lesson)">
                     <!-- 第一章 前两节 -->
                    <div v-if="j == 0 || j == 1">
                      <div class="section-item clearfix">
                        <span :class="{
                          'kw-icon-video section-type-icon': lesson.id != lessonid,
                          'kw-icon-video section-type-icon lv': lesson.id == lessonid,
                          }"><i class="el-icon-video-play"></i></span>
                        <span :class="{
                           'section-dev': lesson.id != lessonid,
                           'section-dev lv': lesson.id == lessonid,
                          }">{{lesson.theme}}</span>
                        <span v-if="lesson.id != lessonid" class="section-status-icon pause-play">试看</span>
                        <span v-else-if="lesson.id == lessonid" class="section-status-icon pause-play"></span>                    
                      </div>
                      <div class="section-duration">
                        <span v-if="lesson.courseMedia != null">时长：{{lesson.courseMedia.duration}}</span>
                      <span v-else>时长：0</span>
                      </div>
                    </div>
                    <!-- 第一章 除前两节后面的 -->
                    <div v-if="j > 1">
                      <div class="section-item clearfix">
                        <span class="kw-icon-video section-type-icon fl"><i class="el-icon-video-play"></i></span>
                        <span class="section-dec need-update">{{lesson.theme}}</span>
                        <!-- 未登录 锁 -->
                        <span v-if="!isLogin" class="section-status-icon pause-play">未解锁</span>
                        <!-- 已登录未购买 锁 -->
                        <span v-else-if="isLogin && !isBuy" class="section-status-icon pause-play">未解锁</span>
                        <!-- 已登录已购买 播放 -->                       
                        <span v-else-if="lesson.id != lessonid" class="section-status-icon pause-play">播放</span>                      
                        <span v-else-if="lesson.id == lessonid" class="section-status-icon pause-play"></span>
                      <div class="section-duration">
                        <span v-if="lesson.courseMedia != null">时长：{{lesson.courseMedia.duration}}</span>
                      <span v-else>时长：0</span>
                      </div>
                    </div>
                  </div>
                  <!-- 正在播放的视频 -->
                  <!-- <div
                    class="content-section content-section-choose"
                    style=" color: #00b38a;"
                    @click="playLesson"
                  >
                    <div class="section-item clearfix">
                      <span class="kw-icon-video section-type-icon fl"
                        ><i class="el-icon-video-play"></i
                      ></span>
                      <span class="section-dec">2.起步</span>
                      <span class="section-status-icon pause-play"></span>
                    </div>
                    <div class="section-duration">
                      <span>时长：0</span>
                    </div>
                  </div> -->
                </div>
              </div>
              <!-- 章 结束 -->

               <!-- 其余章 开始 -->
              <div  v-for="(section,index) in course.courseSections.slice(1,course.courseSections.length)" :key="index">
                <div class="content-label">
                  <div class="content-label-title single-line">{{section.sectionName}}</div>
                  <img
                    class="arrow-icon"
                    src=""
                    alt=""
                  />
                </div>
               
                <div class="content-sections">
                   <!-- 未播放的视频 -->
                  <div class="content-section"  v-for="(lesson, j) in section.courseLessons" :key="j" @click="playLesson(lesson)">
                    <!-- 节 -->
                    <div class="section-item clearfix">
                      <span class="kw-icon-video section-type-icon fl"><i class="el-icon-video-play"></i></span>
                      <span class="section-dec need-update">{{lesson.theme}}</span>
                      <!-- 未登录 锁 -->
                      <span v-if="!isLogin" class="section-status-icon pause-play">未解锁</span>
                      <!-- 已登录未购买 锁 -->
                      <span v-else-if="isLogin && !isBuy" class="section-status-icon pause-play">未解锁</span>
                      <!-- 已登录已购买 播放 -->   
                      <span v-else-if="lesson.id != lessonid" class="section-status-icon pause-play">播放</span>                      
                      <span v-else-if="lesson.id == lessonid" class="section-status-icon pause-play"></span>                    
                    </div>
                    <div class="section-duration">
                      <span v-if="lesson.courseMedia != null">时长：{{lesson.courseMedia.duration}}</span>
                      <span v-else>时长：0</span>
                    </div>
                  </div>
                  </div>
                </div>
              </div>
              <!-- 章 结束 -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "videoDetail",
  components: {},
  data() {
    return {
      myvideo: null, // 播放器对象
      isplay: false, //是否在播放
      nowTime: "00:00", //当前播放时间
      totalTime: "00:00", //总时长
      course:null,//课程
      lessonid:0,//当前播放视频的课节id
      lessonName:null,//当前播放的视频名称
      isLogin:false,//false未登录
      isBuy:false,//false 未购买
    };
  },
  computed: {},
  created() {
    //判断登录
    this.user = JSON.parse(localStorage.getItem("user"));
    if (this.user != null){
      this.isLogin = true;//已登录
    }
    this.isBuy = this.$route.params.isBuy;
    this.course = this.$route.params.course;
    this.lessonid = this.$route.params.lessonid;
  },
  mounted() {
    this.myvideo = document.getElementById("myvideo");
    this.myvideo.controls = true;//显示播放器的控制面板
    this.initplay();//通过id找到点击视频的地址并播放
  },
  methods: {
    play() {
      this.isplay = !this.isplay;
      if (this.isplay) {
        this.myvideo.play();
      } else {
        this.myvideo.pause();
      }
    },
    // 获取视频的时间是秒为单位，格式化城00：00的格式
    formatTime(time) {
      let mm = Math.floor((time % 3600) / 60);
      let ss = Math.floor(time % 60);
      mm = mm < 10 ? "0" + mm : mm;
      ss = ss < 10 ? "0" + ss : ss;
      return `${mm}:${ss}`;
    },
    //获取初始化信息
    getInit() {
      if (!this.myvideo) {
        //获取失败，显示0
        this.totalTime = this.formatTime(0);
      } else {
        //获取视频总时长
        this.totalTime = this.formatTime(this.myvideo.duration);
      }
    },
    //播放时显示当前播放时间和总时长
    handlerNowTime() {
      if (!this.myvideo) {
        this.nowTime = `${this.formatTime(0)}`;
      }
      this.nowTime = this.formatTime(this.myvideo.currentTime || 0);
    },
    //返回
    goBack() {
      this.$router.push({ name: "Course" });
    },
    //播放课程
    playLesson(lesson) {
      this.lessonid = lesson.id;
      this.myvideo.src = lesson.courseMedia.fileEdk;
      this.myvideo.play();
      this.isplay = ! this.isplay;
    },
    //初始化时播放视频
    initplay(){
      console.log(this.course);
      //1 在课程信息中查找即将播放的小节视频的编号
      for(let i = 0; i < this.course.courseSections.length; i ++){
        let section = this.course.courseSections[i];
        for(let j = 0; j < section.courseLessons.length; j ++){
          let lesson = section.courseLessons[j];
          if (lesson.courseMedia!= null){
            if (this.lessonid == lesson.courseMedia.lessonId){
              console.log("视频地址：" + lesson.courseMedia.fileEdk);
             this.lessonName = lesson.theme;
              //2 将小节视频地址 赋值给播放器 进行播放
              this.myvideo.src = lesson.courseMedia.fileEdk;
              return;
            }
          }
        }
      }
    }
  },
};
</script>

<style lang="less">
.video {
  position: relative;
  video {
    width: 100%;
    height: 100%;
  }
  .controls {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      padding: 0 5px;
      color: #fff;
    }
  }
}

.detail-container {
  height: 100%;
}
* {
  -webkit-tap-highlight-color: transparent;
}
* {
  margin: 0;
  padding: 0;
}
div {
  display: block;
}
.left-container {
  margin-right: 380px;
  -webkit-transition: margin-right 0.3s ease 0s;
  transition: margin-right 0.3s ease 0s;
  height: 100%;
  overflow-y: auto;
}
.left-container .nav {
  height: 60px;
  line-height: 60px;
  background: #32373e;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  padding-left: 80px;
  position: relative;
}

.left-container .video-content {
  position: relative;
  background: #272c30;
  overflow-x: hidden;
}
.calc {
  height: calc(100% - 60px);
}
.left-container .nav-back {
  position: absolute;
  top: 1px;
  left: 10px;
  cursor: pointer;
  &:hover {
    color: #00b38a;
  }
}
[class*=" kw-icon-"],
[class^="kw-icon-"] {
  font-family: kw-icon !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.video-container {
  position: relative;
  height: 100%;
  background: #272c30;
}
.right-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 380px;
  height: 100%;
  background-color: #32373e;
  -webkit-transition: right 0.3s ease 0s;
  transition: right 0.3s ease 0s;
}
.detail-part-content-title {
  height: 60px;
  line-height: 60px;
  background: #40464d;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  padding-left: 20px;
  position: relative;
  z-index: 10;
  text-align: left;
}
.study-percent-tip {
  display: none;
}
img {
  border: 0;
  vertical-align: top;
  display: inline-block;
}
.detail-part-content-pc .content-fold {
  position: absolute;
  left: -24px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 24px;
  height: 100px;
  background-color: rgba(50, 55, 62, 0.7);
  border-radius: 8px 0 0 8px;
  z-index: 1;
}
.detail-part-content-pc .content-fold-img {
  background: url(…AoAyliYEBRBlaEqiwcpAikrBShKglCqyFUMcEYCgwjBAAAeaoQrHtg6QoAAAAASUVORK5CYII=)
    no-repeat;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
  background-size: contain;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.detail-part-content-pc .content-label {
  position: relative;
  height: 60px;
  line-height: 60px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  padding: 0 10px;
  background: #2b3035;
  border-radius: 4px;
  margin-top: 10px;

  text-align: left;
  text-indent: 10px;
}
.detail-part-content-pc .content-label-title {
  width: 310px;
  height: 60px;
}
.single-line {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.detail-part-content-pc .arrow-icon {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 21px;
  right: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
img {
  border: 0;
  vertical-align: top;
  display: inline-block;
}
.detail-part-content-pc .content-sections {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
.detail-part-content-pc .content-section {
  padding: 15px 10px;
  color: #fff;
  font-size: 14px;
  min-height: 40px;
  border-bottom: 1px solid #272c30;
  font-family: none;
  opacity: 0.7;
}
.detail-part-content-pc .section-item {
  position: relative;
  text-align: left;
}
.detail-part-content-pc .section-type-icon {
  font-size: 16px;
  vertical-align: middle;
  margin: 4px 10px 0 0;
}

.fl {
  float: left;
}
.detail-part-content-pc .need-update {
  color: #989b9e;
}

.detail-part-content-pc .section-dec {
  max-width: 270px;
  display: inline-block;
  vertical-align: bottom;
  word-break: break-all;
}
.detail-part-content-pc .section-status-icon {
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 1px;
  color: #989b9e;
}
.detail-part-content-pc .section-duration {
  font-size: 12px;
  margin-top: 4px;
  padding-left: 26px;
  color: hsla(0, 0%, 100%, 0.7);
  text-align: left;
}
.detail-part-content-pc .content-section-choose .pause-play {
  width: 18px;
  height: 18px;
  background: url()
    no-repeat;
  background-size: cover;
  background-position: 0 0;
}
.detail-part-content-pc .content-section:last-of-type {
  border-bottom: none;
  margin-bottom: 25px;
}
.detail-part-content-pc .content-section:hover {
  background: #2b3035;
  cursor: pointer;
}

.detail-part-content-pc .content-section-choose .section-status-icon,
.detail-part-content-pc .content-section-choose {
  color: #00b38a;
}
.kw-icon-video:before {
  // content: "\E903";
}
.detail-part-content-pc .content-section {
  padding: 15px 10px;
  color: #fff;
  font-size: 14px;
  min-height: 40px;
  border-bottom: 1px solid #272c30;
  font-family: none;
  opacity: 0.7;
}
</style>
